<template>
    <a-col :span="colSpan">
        <div class="search-item">
            <label class="search-item__label" v-if="label" :style="[styleWidth, styleAlign]">{{ label }}</label>
            <div class="search-item__inner"><slot /></div>
        </div>
    </a-col>
</template>
<script setup>
import { computed, inject } from 'vue';
const props = defineProps({
    span: {
        type: Number,
        default: 0
    },
    label: {
        type: String,
        default: ''
    },
    algin: {
        type: String,
        defalut: 'left'
    },
    width: {
        type: String,
        default: '80px'
    }
})

const searchKey = inject('search', undefined)

const colSpan = computed(() => props.span || (searchKey ? searchKey?.span : props.span))

const styleWidth = computed(() => {
    return {'width': props.width}
})
const styleAlign = computed(() => {
    return {'text-align': props.algin}
})
</script>
<style lang="scss" scoped>
.search-item {
    display: flex;
    align-items: center;
    
}
.search-item__label {
    padding-right: 10px;
}
.search-item__inner {
    flex: 1;
    width: 0;
}
</style>